<script setup lang='ts' name="mall-home">
import Footer from '@/pages/footer/footer.vue'
import { useGetHomeList } from '@fl/api/man-api'
import { computed } from 'vue'

import Advantage from './component/advantage.vue'
import Brand from './component/brand.vue'
import Elevator from './component/elevator.vue'
import Hot from './component/hot.vue'
import Partner from './component/partner.vue'
import Sence from './component/sence.vue'
import Swiper from './component/swiper.vue'

const { data } = useGetHomeList()

const target = computed(() => {
    return data.value ?? []
})

// 根据id查找对应数据
function getData(id: string) {
    return target.value.length ? target.value.find((v: any) => v.id === id) ?? {} : {}
}

// 根据id查找对应数据
function isShow(id: string) {
    return Boolean(JSON.stringify(getData(id)) !== '{}')
}
</script>

<template>
    <Elevator />

    <Swiper :data="getData('1')" />

    <Advantage :data="getData('2') " />

    <Sence />

    <Brand v-if="isShow('3')"
           :data="getData('3')"
    />

    <Hot />

    <Partner v-if="isShow('4') "
             :data="getData('4')"
    />

    <Footer />
</template>

<style>
.jc-home-title {
    span {
        color: #da0004;
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
    }

    p {
        color: #aaa;
        font-family: '`PingFang SC`';
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
        letter-spacing: 0;
    }
}
</style>
